<template>
	<div class="main">
		<div class="header">
			<router-link to="/dizgl">
				<span class="mui-icon mui-icon-arrowleft"></span>
			</router-link>
			<span>新增收货地址</span>
			<router-link to="/dizgl"><span @click="baocun()">保存</span></router-link>
		</div>
		<div class="add">
			<p class="add_p">
				<span>收货人</span>
				<input type="text" name="" id="name" value="" placeholder="为确保收货，请填写真名，限6个字"/>
			</p>
			<p class="add_p">
				<span>手机号</span>
				<input type="tel" name="" id="tel" value="" placeholder="11位数字"/>
			</p>
			<p class="add_p">
				<span>详细地址</span>
				<input type="text" name="" id="addres" value="" placeholder="请填写详细地址"/>
			</p>
			<p class="add_p">
				<span>门牌号</span>
				<input type="text" name="" id="doornum" value="" placeholder="具体单元号、楼层、门牌号等"/>
			</p>
			
		</div>
	</div>
</template>
<style scoped>
	*{
		margin: 0;padding: 0;list-style: none;text-decoration: none;
	}
	.main{
		width: 100%;background: white;
	}
	.header{
		height: 6rem;background: red;display: flex;justify-content: space-between;align-items: center;
	}
	.header a:nth-child(1){
		margin-left: 1.5rem;font-size: 2.2rem;color: white;
	}
	.header span:nth-child(2){
		font-size: 1.6rem;color: white;
	}
	.header a:nth-child(3){
		margin-right: 1.5rem;font-size: 1.8rem;color: white;
	}
	.add{
		width: 100%;background: white;
	}
	.add_p{
		width: 100%;height: 5rem;border-bottom: 1px solid #C7C7CC;box-sizing: border-box;
		display: flex;justify-content: flex-start;
	}
	.add_p span{
		width: 20%;font-size: 1.4rem;color: #222222;margin-left: 1rem;line-height: 5rem;
	}
	.add_p input{
		width: 75%;border: 0;font-size: 1.4rem;margin-top: 0.5rem;
	}
</style>

<script scoped>
	export default {
		name:'Newadd',
		data () {
			return {
				msg: '新增地址',
				Arradders:[],
			}
		},
		methods:{
			baocun:function(){
				this.Arradders.push({name:$("#name").val(),tel:$("#tel").val(),addres:$("#addres").val(),doornum:$("#doornum").val()});
				console.log(this.Arradders);
				localStorage.obj=JSON.stringify(this.Arradders)
			}
			
		},
		
	}
//	vm.hide()
</script>